<div class="layui-form" lay-filter="layuiadmin-form-admin" id="layuiadmin-form-admin" style="padding: 20px 30px 0 0;">
    <div class="layui-form-item">
        <label class="layui-form-label">祝福人</label>
        <div class="layui-input-block">
            <input type="text" name="name" required placeholder="请输入祝福人" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">主题</label>
        <div class="layui-input-block">
            <input type="text" name="title" required placeholder="请输入主题" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">内容</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" name="content" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">插入音乐</label>
        <div class="layui-input-inline">
            <input type="text" name="music" id="music_input" required placeholder="插入音乐" autocomplete="off"
                   class="layui-input" readonly>
        </div>
        <button style="float: left;" id="music" class="layui-btn"><i class="layui-icon layui-icon-upload-drag"></i>上传
        </button>
        <button style="float: left;margin-left:10px" id="choose" class="layui-btn"><i
                class="layui-icon layui-icon-circle"></i>选择
        </button>
        <button style="float: left;" data-type="audition" class="layui-btn layuiadmin-btn-admin"><i
                class="layui-icon layui-icon-headset"></i>试听
        </button>
        <button style="float: left;" data-type="music_pause" class="layui-btn layuiadmin-btn-admin"><i
                class="layui-icon layui-icon-pause"></i>暂停
        </button>
    </div>
    <div class="audiopalyer"></div>
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="LAY-user-back-submit" id="LAY-user-back-submit" value="确认">
    </div>
</div>

<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    var audition = "{:url('blessing/audition')}";
    layui.config({
        base: '/static/admin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
    }).use(['index', 'upload', 'form'], function () {
        var $ = layui.$, form = layui.form, upload = layui.upload;
        //指定允许上传的文件类型
        upload.render({
            elem: '#music'
            , url: "{:url('file/cut_upload')}"
            , accept: 'audio' //音频
            , done: function (res) {
                $('#music_input').val(res.filePath);
            }
        });
        //事件
        var active = {
            audition: function () {
                if ($('#music_input').val() == "") {
                    layer.msg('请上传音频');
                    return false;
                }
                //首先置空容器，因为除了第一次点击总是有audio标签的
                $(".audiopalyer").html("");
                var aud = $('<audio id="player"  src="/' + $('#music_input').val() + '" hidden></audio>');
                //放到容器里区
                $(".audiopalyer").html(aud);
                //获取当前audio
                var audio = $("#player")[0];
                //局部load()一下
                aud.load();
                audio.play();
                audio.loop = false;
                audio.addEventListener('ended', function () {
                    layer.msg('播放结束');
                }, false);
            },
            music_pause:function () {
                var audio = document.getElementById('player');
                if (audio.paused === false) {
                    audio.pause();// 这个就是暂停
                }else{
                    audio.play();// 这个就是暂停
                }
            }
        };
        $('.layui-btn.layuiadmin-btn-admin').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });


</script>